#@layout()

#define content()

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',border:true">
        <div class="easyui-panel" title="工具栏" style="width:100%;padding:10px;"
             data-options="iconCls:'icon-application_form'">
            #(_res.get('statics.form.select.year')) ：

            <input id="targetYear" style="width: 200px;">

            &nbsp;
            #(_res.get('statics.form.select.aaid')) ：

            <select id="targetAaid" style="width:200px;" multiple="multiple" class="easyui-combobox"
                    data-options="multiple:true,editable:false">
                #for(aaid : aaids)
                <option value="#(aaid.aaid)">#(aaid.aaid)</option>
                #end
            </select>

            &nbsp;
            <button type="button" class="easyui-linkbutton" onclick="generateLineForPhone();">
                #(_res.get('system.common.submit'))
            </button>
        </div>
        <br>
        <div id="aaidCountDiv"  class="easyui-panel" title="统计结果" style="width:100%;padding:10px;"
             data-options="iconCls:' icon-application_form'">
            <div id="aaidCountCharts" style="height: 400px;border:1px solid #ccc;padding:10px;"></div>
        </div>
    </div>


</div>

#end


#define css()

#end


#define js()

<script type="text/javascript" src="#(ctx)/static/echarts/echarts.min.js"></script>
<script type="text/javascript" src="#(ctx)/static/echarts/macarons.js"></script>

<script type="text/javascript">


    $(function () {

        $("#targetYear").combobox({
            url: contextRootPath + '/dataStatistics/getStatisticsAllYears',
            method: 'get',
            valueField: 'id',
            textField: 'text',
            panelHeight: 'auto',
            editable: false
        });
    });


    function generateLineForPhone() {
        var aaidList = $("#targetAaid").combobox("getValues");
        var targetYear = $("#targetYear").combobox("getValue");

        document.getElementById("aaidCountDiv").innerHTML = '<div id="aaidCountCharts" style="height: 400px;border:1px solid #ccc;padding:10px;"></div>';
        if (aaidList.length === 0) {
            $.messager.alert("提示", "#(_res.get('system.validator.selectnone'))");
            return;
        }

        if (targetYear === '') {
            $.messager.alert("提示", "#(_res.get('system.validator.selectnone'))");
            return;
        }

        var regCountListData;

        $.ajax({
            url: contextRootPath + "/dataStatistics/aaidStatisticsCharts",
            data: {'staYear': targetYear, aaidList: JSON.stringify(aaidList)},
            async: false,
            dataType: 'json',
            success: function (data) {
                var resultArr = new Array();
                $.each(data, function (i, v) {
                    var seriesJson = {};
                    seriesJson.type = 'bar';
                    seriesJson.name = aaidList[i];
                    seriesJson.data = v;

                    var markPointJson = {
                        data: [
                            {type: 'max', name: "#(_res.get('statistic.echarts.max'))"},
                            {type: 'min', name: "#(_res.get('statistic.echarts.min'))"}
                        ]
                    };
                    seriesJson.markPoint = markPointJson;

                    var markLineJson = {
                        data: [
                            {type: 'average', name: "#(_res.get('statistic.echarts.avg'))"}
                        ]
                    };

                    seriesJson.markLine = markLineJson;

                    resultArr.push(seriesJson);

                });
                regCountListData = resultArr;
            }
        });


        var regCountCharts = echarts.init(document.getElementById("aaidCountCharts"), 'macarons');
        var option = {
            title: {
                text: "#(_res.get('statistic.echarts.phone.title'))",
                subtext: "#(_res.get('statistic.echarts.phone.main'))"
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ["#(_res.get('statistic.echarts.phone.main'))"]
            },
            toolbox: {
                show: true
            },
            calculable: false,
            xAxis: [
                {
                    type: 'category',
                    data: ["#(_res.get('january'))", "#(_res.get('february'))", "#(_res.get('march'))", "#(_res.get('april'))", "#(_res.get('may'))", "#(_res.get('june'))", "#(_res.get('july'))", "#(_res.get('august'))", "#(_res.get('september'))", "#(_res.get('october'))", "#(_res.get('november'))", "#(_res.get('december'))"]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: regCountListData
        };

        regCountCharts.setOption(option, true);
    }


</script>

#end



